import React from "react";

import { Tabs } from "antd";

import "./index.css";

const { TabPane } = Tabs;

const Tab = (props) => {
  const { icon, title } = props;
  return (
    <span style={{ paddingRight: "10px" }}>
      {icon}
      <span style={{ fontSize: "18px" }}>{title || ""} </span>
    </span>
  );
};
/**
 * @param {{
 * tablist : [
 * {
 *     key:string,
 *     tab: {
 *       title:string,
 *       icon: ()=>void,
 *     },
 *     content: ()=>void,
 *   },
 * ]
 * }} props
 */
export default function Popup(props) {
  const { tablist, header, footer } = props;
  const TabPanes = tablist ? (
    tablist.map((item) => (
      <TabPane
        tab={<Tab title={item.tab.title} icon={item.tab.icon} />}
        key={item.key}
      >
        {item.content}
      </TabPane>
    ))
  ) : (
    <TabPane tab={<span>未定义</span>} key={"nothing"}>
      tablist 没有定义
    </TabPane>
  );

  return (
    <div className="popup">
      {header}
      <Tabs size="large" direction="rtl">
        {TabPanes}
      </Tabs>
      {footer}
    </div>
  );
}
